<h2>Why is this an issue?</h2>
<p>To optimize the rendering of React list components, a unique identifier (UID) is required in the <code>key</code> attribute for each list item.
This UID lets React identify the item throughout its lifetime. Using generated values like <code>Math.random()</code> or <code>Date.now()</code> is
discouraged as their return value will differ between calls, causing the keys to not match up between renders, recreating the DOM. Also, this may
cause bugs if values collide.</p>
<pre data-diff-id="1" data-diff-type="noncompliant">
function Blog(props) {
  return (
    &lt;ul&gt;
      {props.posts.map((post) =&gt;
        &lt;li key={Math.random()}&gt; &lt;!-- Noncompliant: Since the 'key' will be different on each render, React will update the DOM unnecessarily --&gt;
          {post.title}
        &lt;/li&gt;
      )}
    &lt;/ul&gt;
  );
}
</pre>
<p>To fix it, use a string or a number that uniquely identifies the list item. The key must be unique among its siblings, not globally.</p>
<p>If the data comes from a database, database IDs are already unique and are the best option. Otherwise, use a counter or a UUID generator.</p>
<p>Avoid using array indexes since, even if they are unique, the order of the elements may change.</p>
<pre data-diff-id="1" data-diff-type="compliant">
function Blog(props) {
  return (
    &lt;ul&gt;
      {props.posts.map((post) =&gt;
        &lt;li key={post.id}&gt;
          {post.title}
        &lt;/li&gt;
      )}
    &lt;/ul&gt;
  );
}
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> React Documentation - <a href="https://react.dev/learn/rendering-lists#rules-of-keys">Rendering lists</a> </li>
  <li> React Documentation - <a href="https://reactjs.org/docs/reconciliation.html#recursing-on-children">Recursing On Children</a> </li>
  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID">Crypto: randomUUID() method</a> </li>
  <li> Wikipedia - <a href="https://en.wikipedia.org/wiki/Universally_unique_identifier">UUID</a> </li>
</ul>
<h3>Related rules</h3>
<ul>
  <li> {rule:javascript:S6477} - JSX list components should have a key property </li>
  <li> {rule:javascript:S6479} - JSX list components should not use array indexes as key </li>
</ul>
